<template>
  <div>
    <!-- 筛选头头 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-search"></i>
            筛选查询
            <div class="rightTop">
              <a @click="packUp">
                <i class="el-icon-arrow-up"></i>
                收起筛选
              </a>
              <el-button @click="Submit()">查询结果</el-button>
            </div>
          </el-header>
          <!-- 筛选条件 -->
          <div class="goodsrecycle-button-select-2" v-if="showSelect">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="优惠券名称:">
                <el-input
                  v-model="formInline.disName"
                  placeholder="优惠券名称"
                  class="select-width-1"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="优惠券类型：">
                <el-select v-model="formInline.disType">
                  <el-option
                    label="注册赠券:新用户注册成功即发放到用户账户中"
                    :value="0"
                  ></el-option>
                  <el-option
                    label="购物赠券:购物满一定金额即发放到用户账户中(后台发货后)"
                    :value="3"
                  ></el-option>
                  <el-option
                    label="全场赠券:用户在优惠券首页或列表页或商品详情页或侧边栏点击领取"
                    :value="1"
                  ></el-option>
                  <el-option
                    label="会员赠券:同全场赠券(可限定领取的会员等级)。"
                    :value="2"
                  ></el-option>
                   <el-option
                    label="全部"
                    :value="4"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-container>
      </el-main>
    </el-container>

    <!-- 数据列表 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-s-unfold"></i>
            数据列表
            <div class="rightTop">
              <el-form
                :inline="true"
                :model="listLine"
                class="demo-form-inline"
              >
                <el-button @click="addCoupon">添加优惠券</el-button>
                <el-form-item label="" style="padding-top: 6px">
                  <el-select
                    v-model="listLine.sort"
                    placeholder="排序方式"
                    class="select-width-2"
                  >
                    <el-option label="时间" :value="0"></el-option>
                    <el-option label="订单状态" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="disId" label="编号"></el-table-column>
              <el-table-column
                prop="disName"
                label="优惠劵名称"
              ></el-table-column>
              <el-table-column
                prop="disType"
                label="优惠券类型"
              >
              <template scope="scope">
              <p v-if="scope.row.disType==0">注册赠券</p>
                <p v-if="scope.row.disType==1">全场赠券</p>
                  <p v-if="scope.row.disType==2">会员赠券</p>
                    <p v-if="scope.row.disType==3">购物赠券</p> 
              </template>
              </el-table-column>
              <!-- <el-table-column
                prop="canUseGood"
                label="可使用商品"
              ></el-table-column> -->
              <el-table-column
                prop="useCondition"
                label="使用门槛"
              >
               <template scope="scope">
               <p v-if="scope.row.useCondition==0">无限制</p> 
               <p v-if="scope.row.useCondition>0">满{{scope.row.useCondition}}元可用</p> 
               </template>
              </el-table-column>
              <el-table-column prop="price" label="面值"></el-table-column>
              <el-table-column prop="platform" label="适用平台">
    <template scope="scope">
  <p v-if="tableData.platform==1">全平台</p>
                  <p v-if="scope.row.platform==2">PC端</p>
                    <p v-if="scope.row.platform==3">移动端</p> 
    </template>
              </el-table-column>
              <el-table-column prop="endTime" label="有效期">
              </el-table-column>
              <el-table-column prop="state" label="状态">
                  <template scope="scope">
                  <p v-if="scope.row.state==0">未过期</p>
                    <p v-if="scope.row.state==1">已过期</p> 
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="lookCoupon(scope.$index, scope.row)"
                    type="text"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    @click="updateCoupon(scope.$index, scope.row)"
                    type="text"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    @click="deleteOne(scope.$index, scope.row)"
                    type="text"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
              <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>

import discountApi from "@/api/operate/discount";
export default {
  data() {
    return {
     // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
       total: 5,
      currentPage1: 1,


      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date())
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit("pick", date)
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", date)
            }
          }
        ]
      },
      showSelect: true,
      listLine: {
        sort: 0
      },
      formInline: {
        disName:"",
        disType: 4
      },
      tableData: []
    }
  },
  watch:{

    "listLine.sort":function(){
this.intData();
    }
  },
  methods: {
    packUp() {
      this.showSelect = !this.showSelect
      console.log("submit!")
    },
    Submit() {
      this.intData();
    },
    addCoupon() {
      this.$router.push("/operation/addCoupon")
    },
    updateCoupon(index, row) {
      console.log(row)
      this.$router.push({path:"/operation/redactCoupon",query:{disId:row.disId}})
    },
    deleteOne(index, rows) {
     this.deleteData(rows.disId);
    },
    // 分页
    handleSizeChange(val) {
     this.pageSize=val;
     this.intData();
    },
    handleCurrentChange(val) {
      this.currentPage1=val;
      this.intData();
    },
    lookCoupon() {
      this.$router.push("/operation/selectCoupon")
    },

// 获取数据
intData(){
  let dto={
pageNum:this.currentPage1,
pageSize: this.pageSize,
disName:this.formInline.disName,
disType:this.formInline.disType,
sort:this.listLine.sort

  }


discountApi.getList(dto.pageNum, dto.pageSize,dto.disName,dto.disType,dto.sort).then(response=>{

console.log(response);

this.tableData=response.data.data.list;
this.total=response.data.data.total;

})

},

  // 删除数据

  deleteData(Id){

let discount={
disId:Id,
isDelete:0,
};
    discountApi.updateOne(discount).then(response=>{

      console.log(response);
      this.intData();
      this.$message(response.data.message);
    })
  }

  },
  created(){
    this.intData();
  }
}
</script>
<style scoped>
.rightTop {
  float: right;
}
.goodsrecycle-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}
.select-width-1 {
  width: 220px;
}
.select-width-2 {
  width: 150px;
}
.centerTag {
  text-align: center;
}
.dateCss {
  float: left;
}
</style>
